<template>
  <div class="order-detail">
    <loading v-if="loading"></loading>
    <div v-else>
      <div class="order-list">
        <div class="order-item">
          <p>订单编号：</p>
          <p>{{orderDetail.orderInfo.orderNumber}}</p>
        </div>
        <div class="order-item">
          <p>下单时间：</p>
          <p>{{orderDetail.orderInfo.dealTime}}</p>
        </div>
        <div class="order-item">
          <p>订单状态：</p>
          <p>{{stateList[orderDetail.orderInfo.state]}}</p>
        </div>
        <div class="order-item">
          <p>商品数量：</p>
          <p>{{orderDetail.goods.length}} 件</p>
        </div>
        <div class="order-item">
          <p>订单金额：</p>
          <p class="balance-pay">￥{{orderDetail.orderInfo.orderMoney}}</p>
        </div>
        <div class="order-item">
          <p>货款支付：</p>
          <p class="balance-pay">￥{{orderDetail.orderInfo.payGoodMoney || '0.00'}}</p>
        </div>
        <div class="order-item">
          <p>余额支付：</p>
          <p class="balance-pay">￥{{orderDetail.orderInfo.payBalance || '0.00'}}</p>
        </div>
        <div class="order-item" v-if="orderType == 'carryAdd' || orderType == 'normalAdd'">
          <p>收件人：</p>
          <p>{{orderDetail.orderInfo.name}}</p>
        </div>
        <div class="order-item" v-if="orderType == 'carryAdd' || orderType == 'normalAdd'">
          <p>联系电话：</p>
          <p>{{orderDetail.orderInfo.phone}}</p>
        </div>
        <div class="order-item" v-if="orderType == 'carryAdd' || orderType == 'normalAdd'">
          <p>地区：</p>
          <p>{{orderDetail.orderInfo.provinceName + orderDetail.orderInfo.cityName + orderDetail.orderInfo.countryName}}</p>
        </div>
        <div class="order-item" v-if="orderType == 'carryAdd' || orderType == 'normalAdd'">
          <p>详细地址：</p>
          <p>{{orderDetail.orderInfo.address}}</p>
        </div>
      </div>
      <div class="text">订单明细：</div>
      <div class="product-list">
        <div class="product-item" v-for="(item,index) in orderDetail.goods" :key="index">
          <product-item :cover="item.goodsImg ? staticHost + item.goodsImg : ''">
            <div class="product-info" slot="product-item">
              <p class="product-name">{{item.goodsName}}</p>
              <p class="product-specification">{{item.size}}</p>
              <p>
                <span class="product-price">￥{{item.price}}</span>
                <span class="product-count">x {{item.num}}</span>
              </p>
            </div>
          </product-item>
        </div>
      </div>

      <!-- 未支付时显示 -->
      <div class="operation-btn" v-if="orderDetail.orderInfo.state == 0">
        <div class="submit submitBtn">
          <van-button size="small" @click="cancelOrder">取消订单</van-button>
        </div>
        <div class="submit submitBtn">
          <van-button size="small" type="info" @click="goToRecharge">去支付订单</van-button>
        </div>
      </div>

      <!-- 上级缺货时显示 -->
      <div class="operation-btn" v-if="orderDetail.orderInfo.state == 4">
        <div class="submit submitBtn">
          <van-button size="small" @click="cancelOrder">取消订单</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productItem from "../components/product_item.vue";
import { staticHost } from "../service/HOST.js";
import { Button, Dialog, Toast } from "vant";
import loading from "../components/loading.vue";

export default {
  components: {
    productItem,
    vanButton: Button,
    loading
  },
  data() {
    return {
      loading: true,
      staticHost,
      // shopAdd 进货订单详情, carryAdd 提货订单详情, normalAdd 直购订单详情
      orderType: this.$route.query.orderType,
      orderNumber: this.$route.query.orderNumber,
      orderDetail: {
        orderInfo: {},
        goods: []
      },
      stateList: {
        0: "待支付",
        1: "待发货",
        2: "已发货",
        3: "已完成",
        4: "上级缺货",
        5: "已取消"
      }
    };
  },
  async mounted() {
    // this.orderDetail = JSON.parse(localStorage.getItem("orderDetail"));
    // this.orderNumber = this.$route.query.orderNumber
    await this.getOrderDetail();

    if (this.orderType == "shopAdd") {
      await this.setOrderAuto();
    } else if (this.orderType == "carryAdd" || this.orderType == "normalAdd") {
    }

    this.loading = false;
  },
  beforeDestroy() {
    localStorage.removeItem("orderDetail");
  },
  methods: {
    cancelOrder() {
      Dialog.confirm({
        title: "确认取消吗",
        message: ""
      })
        .then(() => {
          return this.$http
            .post(this.$urls.QXDD, {
              orderId: this.orderDetail.orderInfo.id
            })
            .then(res => {
              if (res.data.code == 200) {
                Toast.success(res.data.msg);
                this.$router.go(-1);
              }
            });
        })
        .catch(err => {
          Toast(err);
        });
    },
    goToRecharge() {
      this.$router.replace({
        path: "/order_pay",
        query: {
          orderNumber: this.orderDetail.orderInfo.orderNumber
        }
      });
    },
    // 云仓进货完成，自动完成状态为“上级缺货”订单
    setOrderAuto() {
      return this.$http.post(this.$urls.YCDDWC, {}).then(res => {
        if (res.data.code == 200) {
        }
      });
    },
    getOrderDetail() {
      return this.$http
        .post(this.$urls.GJDDHHQ, {
          orderNum: this.orderNumber
        })
        .then(res => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data;
          }
        });
    }
  }
};
</script>

<style scoped>
.order-list {
  background-color: #fff;
}

.order-item {
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  /* border-top: 1px solid var(--line-between-color) */
}

.text {
  padding: 10px 15px;
}

.product-list {
  background-color: #fff;
}

.product-info {
  padding-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-info > p:last-child {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.product-item {
  margin-bottom: 2px;
}

.product-price,
.balance-pay {
  color: var(--money-up);
}

.product-count {
  padding-left: 10px;
}

.product-name {
  width: 100%;
  color: #423d43;
  white-space: nowrap;
  overflow: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
}

.submitBtn {
  margin-top: 0;
  padding: 8px 10px;
}

.operation-btn {
  /* margin-top: 2px; */
  display: flex;
  align-items: center;
  background-color: #fff;
  justify-content: flex-end;
}
</style>

<style>
.operation-btn .van-button {
  border-radius: 22px !important;
}
</style>